<template>
	<view class="component-amap">
		<view class="loading">地图加载中</view>
		<view id="amap" class="amap" :listArr="listArr" :change:listArr="ModuleInstance.setParkList"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				listArr: [],
			};
		},
		/*注意：uniapp子组件是没onLoad()和onShow()生命周期，只有页面组件才有 */
		mounted() {
			this.getDataList();
		},
		methods: {
			//获取数据
			getDataList() {
				this.listArr = [{
						sysParkId: "1474279383801511937",
						sysParkName: "测试迭代1园区",
						lng: 113.266841,
						lat: 23.128524,
						address: "测试具体位置",
						head: "15847441451",
						phone: "13845545445",
					},
					{
						sysParkId: "1509865555600539649",
						sysParkName: "新增园区",
						lng: 116.329519,
						lat: 39.972134,
						address: "测试详细地址",
						head: "测试",
						phone: "18445544444",
					},
				];
			},
			//跳转到详情页面
			goDetails({ sysParkId }) {
				uni.navigateTo({
					url: `/pages/statisticsAdminSingle/index?sysParkId=${sysParkId}`,
				});
			},
		},
	};
</script>
<script module="ModuleInstance" lang="renderjs">
	export default {
		data() {
			return {
				map: null,
				layer: null,
				parkList: [],
			};
		},
		mounted() {
			if (window.AMap) {
				// 观测更新的数据在 view 层可以直接访问到
				this.initAmap();
			} else {
				// 动态引入较大类库避免影响页面展示
				const script = document.createElement('script');
				// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
				script.src = `https://webapi.amap.com/maps?v=2.0&key=b0c8fc70cd402ddb153c3416e9261d50`; //您申请的key值
				//script标签的onload事件都是在外部js文件被加载完成并执行完成后才被触发的
				script.onload = () => {
					window._AMapSecurityConfig = {
						securityJsCode: 'f1b946e6f51b1235374f1f92c38b0c33', //您申请的安全密钥
					}
					this.initAmap();
				}
				document.head.appendChild(script);
			}
		},
		beforeDestroy() {
			
		},
		methods: {
			initAmap() {
				this.map = new AMap.Map('amap', {
					zoom: 13, //显示的缩放级别
					zooms: [2, 30], //地图显示的缩放级别范围, 默认为 [2, 20] ，取值范围 [2 ~ 30]
					center: [113.276521, 23.133519],
				});
				this.map.on("complete", () => {
					console.log("地图加载完成！");
					this.createLabelsLayer();
				});
			},
			//创建-海量点
			createLabelsLayer() {
				// 创建 AMap.LabelsLayer 图层
				if (!this.map) return;
				if (!this.layer) {
					this.layer = new AMap.LabelsLayer({
						zIndex: 1000,
						collision: false
					});
					// 将图层添加到地图
					this.map.add(this.layer);
				}
				this.removeAllOverlay();

				var markers = [];
				var icon = {
					type: 'image',
					image: 'http://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
					size: [26, 34],
					anchor: 'bottom-center',
				};

				this.parkList.forEach((element, index) => {
					element.position = [element.lng, element.lat];
					var labelMarker = new AMap.LabelMarker({
						position: element.position,
						icon,
					});
					markers.push(labelMarker);
					labelMarker.on('click', (e) => {
						// 给marker绑定事件
						this.openInfo(element);
					});
				});

				// 一次性将海量点添加到图层
				this.layer.add(markers);

				if (!this.isExistImplement) {
					this.isExistImplement = true; //只执行一次
					this.map.setFitView(null, false, [60, 15, 30, 15]); //自适应显示多个点标记
					let zoom = this.map.getZoom(); //获取当前地图级别
					if (zoom > 5) this.map.setZoom(5); //设置地图层级
				}

			},
			//在指定位置打开信息窗体
			openInfo(obj) {
				//构建信息窗体中显示的内容
				let domStr = `
                <div class="map-open-info">
                    <div class="park-name">${obj.sysParkName || 'XXX园区'}</div>
                    <div class="position">具体位置：${obj.address || '-'}</div>
                    <div class="person">负责人：${obj.head || '-'}</div>
                    <div class="phone">手机号码：${obj.phone || '-'}</div>
                    <div class="button">查看更多</div>
                </div>           
            `;
				var infoWindow = new AMap.InfoWindow({
					zIndex: 99999,
					offset: [0, -38], //偏移
					content: domStr, //使用默认信息窗体框样式，显示信息内容
				});
				infoWindow.open(this.map, obj.position);

				var button = document.querySelector('.map-open-info .button');
				button.onclick = () => {
					uni.navigateTo({
						url: `/pages/statisticsAdminSingle/index?sysParkId=${obj.sysParkId}`,
					});
					//this.$ownerInstance.callMethod('goDetails', {sysParkId:obj.sysParkId})
				}
			},
			removeAllOverlay() {
				// 清除地图上所有添加的覆盖物
				this.map.clearMap();
			},
			//接收数组参数
			setParkList(newValue, oldValue, ownerInstance, instance) {
				this.parkList = newValue;
				this.createLabelsLayer();
			},
		},
	};
</script>

<style lang="scss">
	//高德地图-logo隐藏
	::v-deep.amap-logo {
		display: none;
		opacity: 0 !important;
	}

	//高德地图-版权隐藏
	::v-deep.amap-copyright {
		opacity: 0;
	}

	::v-deep.map-open-info {
		width: 80vw;
		position: relative;

		.park-name {
			font-size: 30rpx;
			font-weight: bold;
		}

		.position,
		.person,
		.phone {
			font-size: 28rpx;
			padding: 5rpx 0rpx;
		}

		.button {
			font-size: 26rpx;
			font-weight: 500;
			color: #1980ff;
			padding: 15rpx 15rpx;
			background: #f3faff;
			border-radius: 8rpx;
			position: absolute;
			right: -15rpx;
			bottom: 0rpx;
			cursor: pointer;
		}
	}

	.component-amap {
		position: absolute;
		z-index: 99;
		height: 100%;
		width: 100%;
		top: 0px;

		.loading {
			position: absolute;
			top: 35vh;
			left: 50%;
			transform: translateX(-50%);
		}

		.amap {
			min-height: 300px;
			height: 100%;
			position: relative;
			z-index: 8;
		}
	}
</style>